<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime : 2020-01-07 14:10:50
 * @LastEditors  : Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script type="text/javascript" src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<script type="text/javascript" src="../script/db.js"></script>
	<style type="text/css">
		.table {
			width: 100%;
			overflow: hidden;
		}
		table {
			width: 100%;
			overflow: hidden;
		}

		table tr th,
		table tr td {
			border: 0 !important;
			padding: 3px !important;
			font-size: 14px;
		}

		.line {
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.td-remark {
			color: #969799;
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="销售出库" left-arrow @click-left="onClickLeft">
				<div slot="right" class="head-right">
					<span @click="printBill">
						<img src="../image/print.png" />
					</span>
				</div>
			</van-nav-bar>
			<div class="body-with-bottom">
				<div class="content content-padding">

					<div class="table">
						<table>
							<tr>
								<th colspan="4" style="text-align: center;font-size: 20px;background: transparent;">{{printData.title}}</th>
							</tr>
							<tr>
								<th colspan="4" style="text-align: center;font-size: 18px;background: transparent;">{{printData.subtitle}}</th>
							</tr>
							<tr v-for="(value,index) in printData.top">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-if="printData.node && printData.node.length">
								<td v-for="(value,index) in printData.node[0]">{{index}}</td>
							</tr>
							<tr v-for="(value1,index1) in printData.node">
								<td v-for="(value2,index2) in value1" :colspan="index2 == '备注'?4:1">
									<div v-show="index2=='备注'" class="td-remark" :style="{width:getWidth()}">{{value2}}</div>
                                    <div v-show="index2!='备注'">{{value2}}</div>
								</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-for="(value,index) in printData.center">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-for="(value,index) in printData.bottom">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
						</table>
					</div>
					<img class="seal" :src="getSealImage()" v-if="sealType!=0" />
				</div>
				<van-loading v-if="showLoading" />
			</div>
			<div class="bottom">
				<div class="bottom-left-label">
					<span>合计:</span>
					<span class="number">{{getTotalCount()}}</span>
					<span class="number">￥{{getTotalPrice()}}</span>
				</div>
				<div class="bottom-right-button">
					<!-- <van-button :disabled="true" loading-text="数据提交中..."
						type="primary" block>已过账</van-button> -->
				</div>
			</div>
		</div>

	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			vm.onClickLeft();
		});

		var historyData = api.pageParam.historyData;
		var userInfo = FLD.getUserInfo();
		var FNScanner = api.require('FNScanner');
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				type: 0,
				formID: 0,
				sealType: 0,
				formData: {
					S_ClientID: 0,
					S_ClientName: '',
					S_RecMoney: '',
					S_PerMoney: '',
					S_BranchID: userInfo.S_BranchID,
					S_BranchName: userInfo.S_BranchName,
					S_EmplID: userInfo.S_EmplID,
					S_EmplName: userInfo.S_EmplName,
					S_ClassID: userInfo.S_ClassID,
					S_ClassName: userInfo.S_ClassName,
					S_StockID: userInfo.S_StockID,
					S_StockName: userInfo.S_StockName,
					S_CargoID: userInfo.S_CargoID,
					S_CargoName: userInfo.S_CargoName,
					S_ProjectID: userInfo.S_ProjectID,
					S_ProjectName: userInfo.S_ProjectName,
					S_VIPID: 0,
					S_VIPName: '',
					S_PriceN: 0,
					S_PriceNName: '',
					Explain: ''
				},
				formDetailData: [],
				printData: []
			},
			created: function () {
				var that = this;
				if (historyData) {
					that.type = historyData.B_Type;
					that.formID = historyData.BillID;
					that.sealType = historyData.IsPayZT;
					that.formData = {
						S_ClientID: historyData.ClientID || 0,
						S_ClientName: historyData.ClientName || '',
						S_RecMoney: historyData.RecMoney || '',
						S_PerMoney: historyData.PerMoney || '',
						S_BranchID: historyData.BranchID || 0,
						S_BranchName: historyData.BranchName || '',
						S_EmplID: historyData.EmplID || 0,
						S_EmplName: historyData.EmplName || '',
						S_ClassID: historyData.ClassID || 0,
						S_ClassName: historyData.ClassName || '',
						S_StockID: historyData.StockID || 0,
						S_StockName: historyData.StockName || '',
						S_CargoID: historyData.CargoID || 0,
						S_CargoName: historyData.CargoName || '',
						S_ProjectID: historyData.ProjectID || 0,
						S_ProjectName: historyData.ProjectName || '',
						S_VIPID: historyData.VIPCardID || 0,
						S_VIPName: historyData.VIPName || '',
						S_PriceN: historyData.PriceN || 0,
						S_PriceNName: historyData.PriceNName || '',
						Explain: historyData.Explain || ''
					}
					that.getDetailData();

				}

			},
			methods: {
				getWidth(){
                    return api.winWidth + 'px';
                },
				getSealImage() {
					var that = this;
					if (that.sealType == 1) {
						return '../image/confirmed.png';
					}
					if (that.sealType == 2) {
						return '../image/paying.png';
					}
					if (that.sealType == 3) {
						return '../image/payed.png';
					}
				},
				getDetailData() {
					var that = this;
					var obj = {
						S_BillType: 101,
						S_B_Type: that.type,
						S_BillID: that.formID
					}

					that.showLoading = true;
					FLD.ajax('AP_HisListDe_A', obj, function (res) {
						that.showLoading = false;
						if (res.ds[0].status && res.ds[0].status == 500) {
							layer.open({
								content: res.ds[0].msg,
								skin: 'msg',
								time: 2
							});
						} else {
							for (var i in res.ds) {
								var row = res.ds[i];
								that.formDetailData.push({
									showDetail: false,
									hasEdit: false,
									id: row.ProductID,
									detailID: row.BillDeID,
									name: row.ProductName,
									code: row.ProductCode,
									spec: row.ProductSpec,
									num: row.BNum,
									price: row.DPrice || 0,
									stockID: row.StockID,
									stockName: row.StockName,
									cargoID: row.CargoID,
									cargoName: row.CargoName,
									stockNum: row.StockNum,
									unit: row.UnitName,
									remark: row.SPBZ
								})
							}

							that.getPrintBill();
						}
					})
				},
				getPrintBill() {
					var that = this;
					var obj = {
						S_BranchID: that.formData.S_BranchID,
						S_ClientID: that.formData.S_ClientID
					}
					FLD.ajax('AP_PrintIFMN', obj, function (res) {
						var infoData = res.ds[0];
						var nodeArray = [];
						var totalNum = 0;
						for (var i in that.formDetailData) {
							totalNum += that.formDetailData[i].num;
							nodeArray.push({
								'名称': that.formDetailData[i].name,
								'数量': that.formDetailData[i].num,
								'单价': that.formDetailData[i].price,
								'金额': (that.formDetailData[i].num * that.formDetailData[i].price).toFixed(2)
							}, {
								'备注': that.formDetailData[i].remark
							})
						}
						that.printData = {
							title: '福路德汽配连锁',
							subtitle: '随货同行单',
							top: {
								// '单据号': that.formData.BillNO,
								'客户名称': that.formData.S_ClientName,
								'客户联系方式': infoData.S_CTel,
								'累计应付': infoData.S_YSYE,
								'会员充值余额': infoData.S_VIPYE
							},
							node: nodeArray,
							center: {
								'合计数量': totalNum,
								'合计金额': that.getTotalPrice(),
								'抹零金额': that.formData.S_PerMoney || 0
							},
							bottom: {
								'公司地址': infoData.S_BAddr,
								'联系人': infoData.S_BLnkM,
								'联系方式': infoData.S_BTel,
							}


						}
					})
				},
				getTotalCount() {
					var totalCount = 0;
					for (var i in this.formDetailData) {
						totalCount += this.formDetailData[i].num
					}
					return totalCount;
				},
				getTotalPrice() {
					var totalPrice = 0;
					for (var i in this.formDetailData) {
						totalPrice += this.formDetailData[i].num * this.formDetailData[i].price
					}
					return totalPrice.toFixed(2);
				},
				printBill() {
					var that = this;
					that.showMenu = false;
					var obj = {
						S_BranchID: that.formData.S_BranchID,
						S_ClientID: that.formData.S_ClientID
					}
					FLD.ajax('AP_PrintIFMN', obj, function (res) {
						var infoData = res.ds[0];
						var nodeArray = [];
						var totalNum = 0;
						for (var i in that.formDetailData) {
							totalNum += that.formDetailData[i].num;
							nodeArray.push({
								'名称': that.formDetailData[i].name,
								'数量': that.formDetailData[i].num,
								'单价': that.formDetailData[i].price,
								'金额': (that.formDetailData[i].num * that.formDetailData[i].price).toFixed(2)
							}, {
								'备注': that.formDetailData[i].remark
							})
						}
						var printData = {
							title: '福路德汽配连锁',
							subtitle: '随货同行单',
							top: {
								'客户名称': that.formData.S_ClientName,
								'客户联系方式': infoData.S_CTel,
								'累计应收': infoData.S_YSYE,
								'会员充值余额': infoData.S_VIPYE
							},
							node: nodeArray,
							center: {
								'合计数量': totalNum,
								'合计金额': that.getTotalPrice(),
							},
							bottom: {
								'公司地址': infoData.S_BAddr,
								'联系人': infoData.S_BLnkM,
								'联系方式': infoData.S_BTel,
							}


						}
						window.localStorage.setItem('printData', JSON.stringify(printData));
						api.openWin({
							name: '打印预览',
							url: 'common/printPreview.html',
							reload: true,
							slidBackEnabled: false
						})
					})
				},
				onClickLeft() {
					api.closeWin();

				}
			}
		})
	};
</script>

</html>